<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>

<body>
    <div>
        <div class="nav">
            <a href="#" class="active">个人简介</a>
            <a href="#" style="float: right;">打印</a>
            <a href="#" style="float: right;">下载</a>
        </div>
        <div>
            <div class="left">
                <div class="grid-container">
                    <!-- 第一列 -->
                    <div class="grid-item">
                        <div>
                            <h2 style="text-align: center;">个人简介</h2>
                            <figure>
                                <img src="pig.png" alt=""
                                    style="height: 150px; margin-left: 30%;">
                                <figcaption style="text-align: center;">好人</figcaption>
                            </figure>
                            <div>
                                <span>前端工程师</span><br>
                                <span>湖南农业大学</span><br>
                                <span>全日制本科</span><br>
                                <span>湖南长沙</span><br>
                                <span>预备党员</span><br>
                                <span>455-7890</span><br>
                            </div>
                        </div>
                    </div>
                    <!-- 第二列 -->
                    <div class="grid-item">
                        <div>
                            <div style="text-align: left;background-color: #eee;">技能描述</div>
                            <div style="margin-left: 20%;;">
                                <strong>HTML</strong>
                                <div class="progress-bar">
                                    <div class="progress1"></div>
                                </div>
                            </div>
                            <div style="margin-left: 20%;"><strong>&#32CSS</strong>
                                <div class="progress-bar">
                                    <div class="progress2"></div>
                                </div>
                            </div>
                            <div style="margin-left: 20%;"><strong>&#32&#32JS
                                    <div class="progress-bar">
                                        <div class="progress3"></div>
                                    </div>
                            </div>
                            <div style="margin-left: 20%;"><strong>Java</strong>
                                <div class="progress-bar">
                                    <div class="progress4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 第三列 -->
                    <div class="grid-item">
                        <div>
                            <div style="text-align: left;background-color: #049a45;">联系我</div>
                            <div>
                                <form action="">
                                    <input type="text" value="Enter emali" style=" height: 30px;">
                                    <br>
                                    We'll never share your email with anyone else.
                                    <br>
                                    <input type="text" value="Password" style="height: 30px;">
                                    <br>
                                    <div class="button">
                                    <button>submit</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="grid-container">
                    <!-- 第一列 -->
                    <div class="grid-item">
                        <div class="jumbotron">
                            <h3>四年成果说明，2019年xxx比赛一等奖</h3>
                            <p>
                                住文具收团边变基切者案，必警火身居要选将，院日最单村成，前己满思式给，深（过很镰。
                                的发质南这领看当
                                二立形气海都
                                节命作计能，少区盎肃维常管私活。京识如太和体时品车，自的的角风书家，给机刷这秀特
                                天。目重圆应道美张信感，确平它形花相我,
                                实处家同却约严完提，更图励苗速V很代y。
                                导列都特族织使新任实前，取被省了识调听他龙山养，长清接海面花等素，集
                                局建电束或将1
                            </p>
                        </div>
                    </div>
                    <!-- 第二列 -->
                    <div class="grid-item">
                        <div>
                        
                            <div style="text-align: left ;color:rgb(13, 118, 238)">项目经验</div>
                            
                            <div>
                                <div>
                                    <div><strong>项目名称</strong> &#32&#32&#32 简易购物系统的前端开发</div>
                                    <div><strong>项目周期</strong> &#32&#32&#32 2周</div>
                                    <div><strong>参与人数</strong> &#32&#32&#32 4</div>
                                    <div><strong>项目简介</strong> &#32&#32&#32 采用Bootstrap的前端框架，实现简易购物系统的前端页面，该前端页面分为前后端两大部分。
                                    </div>
                                    <div><strong>个人模块</strong> &#32&#32 谎明个人的职责:2.说明功能实现的昙体的技术要点3.说明具体的难点
                                        少区韩示维常管私活。京汽如味相体时品全，自的的角风书家，给机刷这秀特
                                        山重圆应道美张信感使新任实前，
                                        确平它形花相我,
                                        状酸该联级手何。 导列都特族织取实处家同和约平壳提，更图励亩速/很代又。 被省了识调听他龙长清接海面花等素，集局建电束或将1。况股且想为较，许北V体</div>
                                    。
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 第三列 -->
                    <div class="grid-item">
                        <div>
                            <div style="text-align: left;color:rgb(23, 134, 245)">获奖情况</div>
                                <!-- 无序列表 -->
                                <div class="ul-container">
                                    <ul>
                                      <li>#</li>
                                      <li>1</li>
                                      <li>2</li>
                                      <li>3</li>
                                    </ul>
                                  
                                    <ul>
                                      <li>时间</li>
                                      <li>2019年11月</li>
                                      <li>2019年9月</li>
                                      <li>Larry</li>
                                    </ul>
                                  
                                    <ul>
                                      <li>说明</li>
                                      <li>校级教学金</li>
                                      <li>优秀军训标兵</li>
                                      <li>the bird</li>
                                    </ul>
                                  </div>
                        </div>
                        <!-- 第四列 -->
                        <div class="grid-item">
                            <div>
                                <div style="text-align: left;color:#0c93ee">证书</div>
                                <div>
                                    <div>
                                        
                                        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assunf,nda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes
                                            anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</body>

</html>